<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
  <link rel="shortcut icon" th:href="@{/images/a/logo.ico}"/>
  <title>修改博客页面</title>
  <link rel="stylesheet" th:href="@{/css/style.css}">
  <link rel="stylesheet" th:href="@{/css/bootstrap.css}">
  <script type="text/javascript" th:src="@{/js/bootstrap.js}"></script>
  <link th:href="@{/iconfont/iconfont.css}" rel="stylesheet">
  <link rel="stylesheet" th:href="@{/css/editormd.min.css}">
  <link rel="stylesheet" th:href="@{/css/editormd.preview.css}">
  <link rel="stylesheet" th:href="@{/css/font-awesome.scss}">
  <script type="text/javascript" th:src="@{/js/jquery-1.11.2.min.js}"></script>


  <link rel="shortcut icon" th:href="@{https://pandao.github.io/editor.md/favicon.ico}" type="image/x-icon"/>
  <script th:src="@{/js/editormd.min.js}"></script>
  <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>


  <script th:src="@{/lib/marked.min.js}"></script>
  <script th:src="@{/lib/prettify.min.js}"></script>
  <script th:src="@{/lib/raphael.min.js}"></script>
  <script th:src="@{/lib/underscore.min.js}"></script>
  <script th:src="@{/lib/sequence-diagram.min.js}"></script>
  <script th:src="@{/lib/flowchart.min.js}"></script>
  <script th:src="@{/lib/jquery.flowchart.min.js}"></script>
  <script th:src="@{/js/editormd.js}"></script>
</head>
<body style="background-color: rgb(207, 205, 205);">

<nav class="navbar navbar-expand-lg bg-body-tertiary sticky-top">
  <div class="container-fluid">
    <a class="navbar-brand ms-5" href="#">博客修改</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
            aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav col-10">
        <li class="nav-item ">
          <a class="nav-link active" aria-current="page" th:href="@{/blog/intoMain}">返回首页</a>
        </li>
      </ul>
      <form class="d-flex me-5 col-2" role="search">
        <img th:src="|@{/images/}${session.pic}|" alt="Logo" width="50" height="50" style="border-radius: 50px" class="d-inline-block align-text-top">
        <span style="font-size: 15px;"></span>
      </form>
    </div>
  </div>
</nav>

<div class="container-fluid sticky-top">
  <div class="" id="test-editormd" style="margin: 0 auto">
    <textarea style="display:none;" id="markdown-md-content" name="my-editormd-markdown-doc"></textarea>
    <textarea style="display:none;" id="markdown-html-content" name="my-editormd-html-code"></textarea>

  </div>
</div>

<div class="container-fluid fixed-bottom" style="background-image: linear-gradient(to top, #dfe9f3 0%, white 100%);">
  <div class="row mt-1">
    <div class="col-4 ">
      <p>文章分类</p>
      <select class="form-select form-select-md mb-2" id="mySelect" name="mySelect" aria-label=".form-select-lg example"
              style="width: 100px;">
        <option selected>主分类：</option>
        <option value="1">java</option>
        <option value="2">校庆</option>
        <option value="3">生活</option>
      </select>

      <select class="form-select form-select-sm mb-3" id="cySelect" name="cySelect" aria-label=".form-select-sm example"
              style="width: 100px;">
        <option selected>次分类</option>
        <option value="1">java基础</option>
        <option value="2">javaEE学习生活</option>
        <option value="3">生活趣事</option>
        <option value="4">高考时事</option>
        <option value="5">校庆准备</option>
      </select>
    </div>
    <div class="col-8">
      <div class="form-floating mt-1 mb-2" style="width: 300px;">
       <input type="text" id="title" th:value="${session.title}" class="form-control" placeholder="标题 ">
        <label for="floatingInput">标题</label>
      </div>
      <div class="form-floating" >
       <input type="text" id="subtitle" class="form-control" th:value="${session.subtitle}" placeholder="摘要">
        <label for="floatingPassword">摘要</label>
      </div>

    </div>
    <button class="btn btn-outline-success " type="button" id="send"><i class="iconfont icon-tianjia"
                                                                        style="font-size: 20px;"></i>上传</button>
  </div>

</div>

<script type="text/javascript" th:src="@{/js/bootstrap.js}"></script>

<script>
  var testEditor;
  $(document).ready(function () {

    //得到 markdown
    let testEditormdView;
    // todo editor 修改
    window.onload=$.get("/blog/showMarkdown", {title: '[[${session.title}]]'}, function (markdown) {
      let m=markdown;
      testEditormdView = editormd("test-editormd", {
        // 从数据库里得到数据
        markdown: markdown,
        width: "90%",
        height: 698,
        path: "/lib/",
        // saveHTMLTOTextarea: true
        htmlDecode: "style,script,iframe",
        saveHTMLToTextarea: true,
        tocm: true,
        tex: true,
        emoji: true,
        taskList: true,
              flowChart: true,
              sequenceDiagram: true
      });
    });

    // 更新内容 将信息插入信息
    $('#send').click(function () {
      let info = {
        phone: "1",
        title: $('#title').val(),
        subtitle: $('#subtitle').val(),
        content: $('#markdown-md-content').val(),
        mid: $('#mySelect').val(),
        cid: $('#cySelect').val()
      }
      let jsonInfo = JSON.stringify(info);

      $.ajax({
        url: "uploadText", // 后端接收Markdown的URL
        type: "post", // 使用POST方法发送数//
        contentType: "application/json", // 发送JSON数据
        data: jsonInfo, // 将Markdown文本作为JSON对象发送
        success: function (response) {
          // 请求成功时的处理逻辑
          if (response.result === true) {
            alert("修改成功");
            window.location.href = response.url;
            // location.reload(); // 刷新整个页面
          } else {
            alert(response.info)
          }
        },
        error: function (xhr, status, error) {
          // 处理错误
          // 请求失败时的处理逻辑
          console.error('响应失败:', status, error);
          alert('发送请求到后端时出错');
        }
      });
    });
  });
</script>
</body>
</html>